<template>
    <!-- 每笔订单的信息 -->
    <div>
        <div  v-for="(or,index) in orders" :key="index">
            <el-card style="margin-bottom: 10px;">
            <div slot="header" class="clearfix">
                <span>
                    <span style="padding-left: 30px;">
                        订单号: <span style="font-weight: 600;padding-left: 5px;">{{or[0].orderId}}</span>
                    </span>
                </span>
                <el-button style="float:right" type="danger" size="mini">{{price[index]}}</el-button> 
                <el-button style="float:right" @click="alipay(or[0].orderId,price[index])" type="danger" size="mini">支付宝</el-button>
                <el-button style="float:right" @click="wxPay(or[0].orderId,price[index])" type="danger" size="mini">微信</el-button>   
                <el-button style="float:right" @click="quxiao(or[0].orderId)" type="danger" size="mini">取 消 支 付</el-button>
            </div>
            <div>
                <el-table 
                    :show-header="false" 
                    :data="or"
                    border style="width: 100%">
                    <el-table-column>
                        <template slot-scope="scope">
                            <!-- <div class="item"> -->
                                <el-image class="item-pic" :src="scope.row.produvtImg"></el-image>

                        </template>
                    </el-table-column>
                    <el-table-column align="center">
                        <template slot-scope="scope">
                                    {{scope.row.productName}}
                            <br>
                            <i class="fa fa-user" style="color: #e3e3e3; font-size: 22px;"></i>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center">
                        <template slot-scope="scope">
                            ￥{{scope.row.productPrice}}
                            <div>
                                <el-divider style="margin: 12px 0;"></el-divider>
                                <!-- {{scope.row.payType}} -->
                                x{{scope.row.buyCounts}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center">
                    <template slot-scope="scope">
                            <el-link>￥{{scope.row.buyCounts * scope.row.productPrice}}</el-link> <br>
                        </template> 
                    </el-table-column>
                </el-table>
            </div>   
        </el-card>
       
        </div>
         <div v-html="alipays" ref="alipayWap"></div>
         <el-dialog
        title="微信支付"
        :visible.sync="centerDialogVisible"
        width="50%"
        center>
            <div class="payPage">
                <h1 v-if="tempViewPageImg">加载中请稍后......</h1>
                <h1  v-if="options">订单编号：{{number}}</h1>
                <h1 class="test"  v-if="options">订单价格：￥{{wxprice}}</h1>
                <div class="test" >
                    <div v-qr="options" v-if="options"></div>
                    <div v-html="html"></div>
                </div>
                <!-- <button @click = "addqrcode">提交订单</button> -->
                
            </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false" v-if="options">取 消 支 付</el-button>
            <!-- <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button> -->
        </span>
    </el-dialog>
    </div>
</template>
<script>
import http from "../../core/HttpRequest"

import axios from 'axios'
export default {
    data: () => ({
        tempViewPageImg: true,
        centerDialogVisible: false,
        testttt:true,
        html: "",
        options: null,
        number: '',
        wxprice: '',
        userId:0,
        uname:'',
        test:true,
        showflag:false,
        orderItem:[],
        orders:[],
        price:[],
        a:0,
        pays:{
            orderId:'',
            totalPrice:0
        },
        alipays:""
    }),
    mounted:function(){
        
        let uname =this.$cookies.get("username")
        this.name = uname
        this.queryId()
        
    },
    methods:{
        queryId(){
            let username = new URLSearchParams()
            username.append('userName', this.name),
            http({
                method: "post",
                url: `/orderNum/id`,
                data: username
            })
            .then(res => {
                // alert("success")
                // alert(res.data.data)
                this.userId=res.data.data
                    //根据id去查询
            let param = new URLSearchParams()
            param.append('userId', this.userId),
            param.append("status",1) 
                http({
                    method: "post",
                    url: `/order/nopay`,
                    data: param
                })
                .then(res=> {
                    // alert("success");
                    console.log(res.data.data[0]);
                    this.orders=res.data.data
                    this.showflag=true
                    for(var i=0;i<res.data.count;i++){
                        for(var j = 0;j<this.orders[i].length;j++){
                            this.a+=this.orders[i][j].totalAmount
                        }
                        this.price[i]=this.a
                        this.a=0
                    }
                    if(this.test){
                        this.test=false
                        this.queryId()
                    }
                })
            
            })
        },
        quxiao(orderId){
                let ordd = new URLSearchParams()
            ordd.append('orderId',orderId),
            http({
                method: "post",
                url: `/orderNum/del`,
                data: ordd
            })
            .then(res => {
                // alert("success")
                // alert(res.data.data)
                console.log(res);
                this.queryId()
            })
        },
        wxPay(ordId,par){
            this.pays.orderId=ordId
            this.pays.totalPrice=par
            //点击支付弹出支付二维码
            this.centerDialogVisible = true 
            http.post("/wxPay",{
                pays:this.pays
            })
            .then(res => {
                //关闭打开二维码时的加载内容
                this.tempViewPageImg = false
                //后端返回的订单价格
                this.wxprice = par
                //后端返回的订单编号
                this.number = res.data.data.number.substr(0,27)
                //生成二维码所必须的信息其中text代表二维码内容
                this.options = {
                    text: res.data.data.resp,
                    render: "canvas",
                    width: 256,
                    height: 256,
                    typeNumber: -1,
                    correctLevel: 2,
                    background: "#ffffff",
                    foreground: "#000000"
                }
                //设置webSocket连接路径
                var webSocketUrl = "ws://localhost:8080/webSocket/" + res.data.data.number
                //webSocket建立webSocket连接
                var webSocket = new WebSocket(webSocketUrl)

                let tmp=this
                webSocket.onmessage = function(event){
                    //后端返回给前端的支付结果
                    var msg = event.data
                    //“1”是自己在后端定义支付成功的返回值
                    if(msg == '1'){
                        //支付成功后在页面上进行修饰
                        tmp.html = "<h2 style='font-size:20px; color:green'>订单支付完成！</h2>"
                        //销毁支付的二维码及相关信息
                        tmp.options = null
                        //延时关闭订单支付界面
                        setTimeout(function () {
                            tmp.centerDialogVisible = false
                        }, 1000);
                    }
                    //支付后刷新界面
                    location.reload()
                }
            })
        },
        alipay(ordId,par){
            this.pays.orderId=ordId
            this.pays.totalPrice=par
            console.log(this.pays);
            axios.post(`http://vgqpuj.natappfree.cc/pay`,{
                    pays:this.pays
                })
                .then(res => {
                    // alert("asdhkajhdfskjshdlfsfjk")
                    this.alipays=res.data
                    // alert(this.alipays)
                    this.$nextTick(()=>{
                        this.$refs.alipayWap.children[0].submit()
                    })
                // this.queryId()
                location.reload()
            })
        },
    }
}
</script>

<style scoped>
    .item {
        display: flex;
    }
    .item .item-pic {
        width: 60px;
        height: 60px;
    }
   
    .item .item-title {
        padding-left: 8px; 
        width: 180px;
    }
    .item .item-num {
        text-align: right; 
        flex: 1; 
        padding-right: 20px;
        color: #e3e3e3;
    }
    .el-divider--horizontal {
        margin: 12px 0;
    }
    .payPage {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .test {
        margin-top: 10px;
    }
</style>